<app-page
  title="{{ 'register_alias' | i18n }}"
  [breadcrumbs]="[{label:'aliases' | i18n, path: '/aliases'}]"
  *ngIf="fees"
>

  <form (ngSubmit)="onSubmit($event);" #setAliasForm="ngForm">

    <mat-form-field>
      <mat-select required [(value)]="type">
        <mat-option value="uri">URI</mat-option>
        <mat-option value="acct">Account</mat-option>
        <mat-option value="other">Other</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <input matInput [(ngModel)]="alias" name="alias" placeholder="{{ 'alias' | i18n }}">
    </mat-form-field>

    <mat-form-field *ngIf="type==='uri'">
      <input matInput [(ngModel)]="uri" name="uri" placeholder="{{ 'uri' | i18n }}">
    </mat-form-field>

    <mat-form-field *ngIf="type==='account'">
      <input matInput prefix="BURST-" burstInputValidator [patterns]="burstAddressPatternRef"
             mask="____-____-____-_____" [dropSpecialCharacters]="false" [showMaskTyped]="true"
             [(ngModel)]="accountAliasURI" name="accountAliasURI" placeholder="{{ 'account_id' | i18n }}">
    </mat-form-field>

    <mat-form-field *ngIf="type==='other'">
      <textarea matInput [(ngModel)]="data" name="data" placeholder="{{ 'data' | i18n }}"></textarea>
    </mat-form-field>

    <mat-form-field>
      <input matInput [(ngModel)]="feeNQT" name="feeNQT" placeholder="{{ 'fee' | i18n }}">
      <label matSuffix>BURST</label>
    </mat-form-field>

    <burst-fee-selector [fees]="fees" [(feeNQT)]="feeNQT"></burst-fee-selector>

    <!-- TODO: use consistent PIN field -->
    <mat-form-field class="pin">
      <input type="password" matInput [(ngModel)]="pin" name="pin" placeholder="Your PIN">
    </mat-form-field>

    <div *ngIf="advanced">
      <mat-form-field>
        <label>{{ 'deadline_hours' | i18n }}</label>
        <input matInput [(ngModel)]="deadline" name="deadline" placeholder="{{ 'deadline_hours' | i18n }}">
      </mat-form-field>

      <mat-form-field>
        <input matInput [(ngModel)]="fullHash" name="fullHash"
               placeholder="{{ 'referenced_transaction_full_hash' | i18n }}" disabled>
      </mat-form-field>

      <mat-checkbox [(ngModel)]="broadcast" name="broadcast" disabled>{{ "do_not_broadcast" | i18n }}</mat-checkbox>
      <br/>

      <mat-checkbox [(ngModel)]="note" name="note" disabled>{{ "add_note_to_self_q" | i18n }}</mat-checkbox>

      <div *ngIf="note">
        <mat-form-field>
          <textarea matInput [(ngModel)]="note_text" name="note_text" placeholder="{{ 'note' | i18n }}"></textarea>
        </mat-form-field>
      </div>

    </div>
  </form>

  <a (click)="advanced=!advanced"><em>{{ advanced ? "basic" : "advanced" | i18n }}</em></a>
  <br/><br/>

  <button type="submit" class="mr-8" mat-raised-button mat-button color="primary"
          (click)="onSubmit($event)">{{ "register" | i18n }}</button>
</app-page>
